import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Drawer, Button } from 'antd'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../../actions/index'

class List extends Component {

    state = {
        visible: false,
        Name: '',
        City: '',
        Title: '',
        Id: ''
    };

    showDrawer(item) {
        this.setState({
            visible: true,
            Name: item.name,
            City: item.city,
            Title: item.title,
            Id: item.id
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    //删除
    detele(index) {
        this.props.detele(index)
    }

    //默认值
    changeData(name, value) {
        this.setState({
            [name]: value
        })
    }

    //保存修改的值
    saveBtn() {
        let obj = {
            Name: this.state.Name,
            City: this.state.City,
            Title: this.state.Title,
            Id: this.state.Id
        }

        this.props.save_Btn(obj)
        this.setState({
            visible: false
        })
    }

    render() {
        let { list } = this.props
        let { Name, City, Title } = this.state
        return (
            <div className='site-drawer-render-in-current-wrapper'>
                {
                    list && list.length ? list.map((item, index) => {
                        return (
                            <div className='item' key={index}>
                                <p>{item.name}</p>
                                <p>{item.city}</p>
                                <p>{item.title}</p>
                                <p>
                                    <Button type="primary" onClick={this.showDrawer.bind(this,item)}>
                                        编辑
                                    </Button>
                                    <Button onClick={
                                        this.detele.bind(this, index)
                                    }>删除</Button>
                                </p>
                            </div>
                        )
                    }) : <div>暂无数据</div>
                }
                <Drawer
                    title="Basic Drawer"
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    getContainer={false}
                    style={{ position: 'absolute' }}
                >
                    <p>
                        店铺名称：<input value={Name} onChange={ e => {this.changeData('Name', e.target.value)}} />
                    </p>
                    <p>
                        店铺地址：<input value={City} onChange={ e => {this.changeData('City', e.target.value)}} />
                    </p>
                    <p>
                        店铺介绍：<input value={Title} onChange={ e => {this.changeData('Title', e.target.value)}} />
                    </p>
                    <p>
                        <Button onClick={
                            this.saveBtn.bind(this)
                        }>保存</Button>
                        <Button>取消</Button>
                    </p>
                </Drawer>
            </div>
        )
    }
}

let mapStateToProps = ({ homeReducer }) => {
    return {
        ...homeReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(List)